<template>
  <DaprPlusTable
    :table-title="$t('fsb.games.gameArea.list')"
    :entity="entity"
    :grid-options="gridOptions"
    :query-api="crudApi.getPage"
    :create-api="crudApi.create"
    :update-api="crudApi.update"
    :delete-api="crudApi.delete"
    :default-new-record="createDefaultGameArea"
    :form-options="formOptions"
    @update:grid-api="onGridApiUpdate"
  />
</template>

<script lang="ts" setup>
import type { ExtendedVxeGridApi, VxeGridProps } from '#/adapter/vxe-table';
import { DaprPlusTable } from '#/components/daprplus';
import type { VbenFormProps } from '#/adapter/form';
import { createCrudApi } from '#/api/daprplus';
import type { IOutDto, IInDto, EntityInfo } from '#/utils/daprplus';
import { $t } from '#/locales';

const baseUrl = '/games/api/gamearea';
const crudApi = createCrudApi<GameAreaInDto, GameAreaOutDto>(baseUrl);

const entity: EntityInfo = {
  code: 'GameArea',
  display: $t('fsb.games.gameArea.title'),
};

// 验证规则
const validRules = {
  name: [
    { required: true, message: '区域名称不能为空' },
    { min: 2, max: 50, message: '区域名称长度应在2-50个字符之间' },
  ],
  remark: [{ max: 200, message: '备注长度应在0-200个字符之间' }],
  mergeAreas: [{ max: 500, message: '合并区域长度应在0-500个字符之间' }],
};

// 扩展配置
const gridOptions: VxeGridProps<GameAreaOutDto> = {
  editRules: validRules,
  columns: [
    { type: 'checkbox', width: 40 },
    {
      field: 'id',
      title: '编号',
      sortable: true,
      width: 130,
    },
    {
      field: 'name',
      title: '区服名称',
      sortable: true,
      align: 'left',
      minWidth: 150,
      editRender: { name: 'input' },
    },
    {
      field: 'mergeAreas',
      title: '合并区服',
      align: 'left',
      minWidth: 200,
      editRender: { name: 'input' },
    },
    {
      field: 'remark',
      title: '备注说明',
      align: 'left',
      minWidth: 300,
      editRender: { name: 'input' },
    },
    {
      field: 'createdTime',
      title: '创建时间',
      formatter: 'formatDateTime',
      width: 150,
    },
  ],
};

let gridApi: ExtendedVxeGridApi;

function onGridApiUpdate(api: ExtendedVxeGridApi) {
  gridApi = api;
}

function createDefaultGameArea(): GameAreaInDto {
  return {
    id: '0',
    name: '新区服',
    remark: '',
    mergeAreas: '',
  };
}

// 配置搜索表单
const formOptions: VbenFormProps = {
  collapsed: false,
  schema: [
    {
      component: 'Input',
      label: '区服名称',
      fieldName: 'name',
    },
    {
      component: 'Input',
      label: '备注',
      fieldName: 'remark',
    },
    {
      component: 'Input',
      label: '合并区服',
      fieldName: 'mergeAreas',
    },
  ],
  showCollapseButton: true,
  submitOnChange: true,
};

export interface GameAreaOutDto extends IOutDto {
  name?: string;
  remark?: string;
  mergeAreas?: string;
  createdTime?: Date;
}

export interface GameAreaInDto extends IInDto {
  name: string;
  remark: string;
  mergeAreas: string;
}
</script>

<style scoped></style>
